---
description: Компонент для отображения анимированных заглушек во время загрузки контента.
---

<Overview group="feedback">

# Skeleton [tag:component]

Компонент для отображения анимированных заглушек во время загрузки контента.
Автоматически адаптируется под размеры и стили ожидаемого контента.

</Overview>

<Playground style={{ maxWidth: 270 }}>
  ```jsx
  <Skeleton width="100%" />
  ```
</Playground>

## Пример использования

<Playground>
  ```jsx
  <Group>
    <SimpleCell
      before={<Skeleton width={36} height={36} borderRadius="50%" />}
      subtitle={<Skeleton width={90} />}
    >
      <Skeleton width={120} />
    </SimpleCell>
    <Div>
      <Skeleton width="100%" />
      <Skeleton width="100%" />
      <Skeleton width="75%" />
    </Div>
  </Group>
  ```
</Playground>

## Настройка анимации

- Свойство `duration` отвечает за длительность анимации;
- Свойство `colorFrom` отвечает за начальный цвет анимации;
- Свойство `colorTo` отвечает за конечный цвет анимации.

```jsx
<Skeleton colorFrom="#f0f0f0" colorTo="#e0e0e0" duration={1.5} />
```

### Отключение анимации

Отключить анимацию можно с помощью свойства `noAnimation`:

<Playground style={{ maxWidth: 270 }}>
  ```jsx
  <Skeleton noAnimation />
  ```
</Playground>

## Особенности

- Поддерживается автоматическая высота для текстовых блоков:

<Playground style={{ maxWidth: 270 }}>
  ```jsx
  <Title style={{ width: '100%' }}>
    <Skeleton />
  </Title>
  ```
</Playground>

- Собственные размеры можно задавать через CSS-переменные:

```jsx
<Skeleton inlineSize="var(--custom-width)" blockSize="var(--custom-height)" />
```

## Свойства и методы [#api]

<PropsTable name="Skeleton" />
